<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NexusGo - 我的行程</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        "background": "#ffffff",
                        "foreground": "#000000",
                        "muted": "#6b7280", // Gray-500
                        "border": "#e5e7eb", // Gray-200
                        "card": "#f9fafb",   // Gray-50
                    },
                    fontFamily: {
                        "display": ["'Noto Sans SC'", "Plus Jakarta Sans", "sans-serif"],
                    },
                    borderRadius: {
                        "DEFAULT": "0.5rem",
                        "lg": "0.75rem",
                        "xl": "1rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
</head>
<body class="bg-background font-display text-foreground">
<div class="flex flex-col min-h-screen">
<header class="flex items-center justify-between whitespace-nowrap border-b border-border px-6 py-3 bg-background/80 backdrop-blur-sm sticky top-0 z-20">
<div class="flex items-center gap-4">
<a class="flex items-center gap-3" href="#">
<div class="size-8 text-foreground">
<svg fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24 45.8096C19.6865 45.8096 15.4698 44.5305 11.8832 42.134C8.29667 39.7376 5.50128 36.3314 3.85056 32.3462C2.19985 28.361 1.76794 23.9758 2.60947 19.7452C3.451 15.5145 5.52816 11.6284 8.57829 8.5783C11.6284 5.52817 15.5145 3.45101 19.7452 2.60948C23.9758 1.76795 28.361 2.19986 32.3462 3.85057C36.3314 5.50129 39.7376 8.29668 42.134 11.8833C44.5305 15.4698 45.8096 19.6865 45.8096 24L24 24L24 45.8096Z"></path>
</svg>
</div>
<h1 class="text-xl font-bold tracking-[-0.015em]">NexusGo</h1>
</a>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-muted hover:text-foreground text-sm font-medium transition-colors" href="#">首页</a>
<a class="text-foreground text-sm font-bold transition-colors" href="#">我的行程</a>
<a class="text-muted hover:text-foreground text-sm font-medium transition-colors" href="#">发现灵感</a>
<a class="text-muted hover:text-foreground text-sm font-medium transition-colors" href="#">关于我们</a>
</nav>
<div class="flex items-center gap-4">
<button class="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-100 text-muted hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined text-xl">notifications</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="User avatar placeholder" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC4S8DuddcIcmPr7bTiSHJ1CyYTwBYt5i4KVmJQGli0aJaAOZZLXKaMVjkOfVwq1EjfgHjKTHkxVJEqurCFPILLadwY_8bHJ5sFPd2kBMIjJojYdPqoQgROrJ0-_-JSJlmz5yegdt0NizcUZxCI3GBNtJm7hBueUdu1uYJBQgDfON6J4hyEkxZNGSm00qFb3v02EYkKIJMniFmRfFXy_sgDEm_WAfLmPCZwdZb6_H4HoPD3Sj47mI07LRjZN5XWUzMB69o6gVcKUw");'></div>
</div>
</header>
<main class="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
<div>
<h2 class="text-3xl font-black tracking-[-0.033em]">我的行程</h2>
<p class="text-muted mt-1">在这里管理您的所有旅行计划。</p>
</div>
<button class="flex items-center justify-center gap-2 min-w-[84px] max-w-[480px] cursor-pointer rounded-lg h-10 px-4 bg-foreground text-background text-sm font-bold hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-lg">add</span>
<span class="truncate">新建行程</span>
</button>
</div>
<div class="mb-6 flex flex-col sm:flex-row gap-4">
<div class="relative flex-1">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted text-xl">search</span>
<input class="w-full h-10 pl-10 pr-4 rounded-lg bg-card text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-gray-300" placeholder="按名称或目的地搜索..." type="text"/>
</div>
<div class="flex gap-4">
<select class="w-full sm:w-auto h-10 pl-3 pr-8 rounded-lg bg-card text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-gray-300 appearance-none">
<option selected="">所有日期</option>
<option>未来行程</option>
<option>过去行程</option>
</select>
<select class="w-full sm:w-auto h-10 pl-3 pr-8 rounded-lg bg-card text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-gray-300 appearance-none">
<option selected="">最新创建</option>
<option>最早创建</option>
<option>按日期排序</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group flex flex-col bg-card rounded-xl border border-border overflow-hidden hover:shadow-lg transition-shadow duration-300">
<a class="block" href="#">
<div class="aspect-[16/9] bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC4-2uzIvtyz1Q9FGdj2gENy8jQdfYGExz9B68pSeTkA34U0Las9qpWFI2A8R-rHwN-icBHI5U3jgPuo6G4KO38OYk8OwbwYCawZnrhfMW1ET-vvvufsgranTxXIlwLIMsWAOiUVuAda_MDW6MzzgVKcM92v80xhyZTQd1nRF906L9Cm7V7eh8TzyRYqGIglZS8Meva6MRR-r1lATfN2JitoR8rl8AI7klzXl-qcbsC18SxE4eKonqF5U5A1E5aITqrsM5cr2LLBA'); filter: grayscale(1);"></div>
<div class="p-5 flex flex-col flex-1">
<h3 class="text-lg font-bold text-foreground">东京探险</h3>
<p class="text-sm text-muted mt-1">2024年7月15日 - 2024年7月22日</p>
</div>
</a>
</div>
<div class="group flex flex-col bg-card rounded-xl border border-border overflow-hidden hover:shadow-lg transition-shadow duration-300">
<a class="block" href="#">
<div class="aspect-[16/9] bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCeozNmiXUj6iCepkabbBdB0wQoxouaaYyarwdCbBlDPta7gslFsu9qr9Je6qvgByAtpPT_khCdk6XFeAD5UrwYb5S5N2sxxOWI-9gT-6TPPR4JaECxILGNQFiOubLvHYYTK1HqSighT6XT8a2TZhTUnbauQluo3Kqx1gDYf5y-dQTE0VG2piA_fmbwP5hkHu1CLjo5igALYAL-4ZypRZOp7XMJV6qU0YF60qdBaL5U5QFyefhqSvbyY1g3kiiXfC6K_GikjLujeQ'); filter: grayscale(1);"></div>
<div class="p-5 flex flex-col flex-1">
<h3 class="text-lg font-bold text-foreground">巴黎浪漫之旅</h3>
<p class="text-sm text-muted mt-1">2024年9月10日 - 2024年9月17日</p>
</div>
</a>
</div>
<div class="group flex flex-col bg-card rounded-xl border border-border overflow-hidden hover:shadow-lg transition-shadow duration-300">
<a class="block" href="#">
<div class="aspect-[16/9] bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCeozNmiXUj6iCepkabbBdB0wQoxouaaYyarwdCbBlDPta7gslFsu9qr9Je6qvgByAtpPT_khCdk6XFeAD5UrwYb5S5N2sxxOWI-9gT-6TPPR4JaECxILGNQFiOubLvHYYTK1HqSighT6XT8a2TZhTUnbauQluo3Kqx1gDYf5y-dQTE0VG2piA_fmbwP5hkHu1CLjo5igALYAL-4ZypRZOp7XMJV6qU0YF60qdBaL5U5QFyefhqSvbyY1g3kiiXfC6K_GikjLujeQ'); filter: grayscale(1);"></div>
<div class="p-5 flex flex-col flex-1">
<h3 class="text-lg font-bold text-foreground">云南古镇寻访</h3>
<p class="text-sm text-muted mt-1">2024年5月1日 - 2024年5月7日</p>
</div>
</a>
</div>
<div class="group flex flex-col bg-card rounded-xl border border-border overflow-hidden hover:shadow-lg transition-shadow duration-300">
<a class="block" href="#">
<div class="aspect-[16/9] bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCeozNmiXUj6iCepkabbBdB0wQoxouaaYyarwdCbBlDPta7gslFsu9qr9Je6qvgByAtpPT_khCdk6XFeAD5UrwYb5S5N2sxxOWI-9gT-6TPPR4JaECxILGNQFiOubLvHYYTK1HqSighT6XT8a2TZhTUnbauQluo3Kqx1gDYf5y-dQTE0VG2piA_fmbwP5hkHu1CLjo5igALYAL-4ZypRZOp7XMJV6qU0YF60qdBaL5U5QFyefhqSvbyY1g3kiiXfC6K_GikjLujeQ'); filter: grayscale(1);"></div>
<div class="p-5 flex flex-col flex-1">
<h3 class="text-lg font-bold text-foreground">美国西海岸公路行</h3>
<p class="text-sm text-muted mt-1">2023年12月20日 - 2024年1月3日</p>
</div>
</a>
</div>
<div class="group flex flex-col bg-card rounded-xl border border-border overflow-hidden hover:shadow-lg transition-shadow duration-300">
<a class="block" href="#">
<div class="aspect-[16/9] bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCeozNmiXUj6iCepkabbBdB0wQoxouaaYyarwdCbBlDPta7gslFsu9qr9Je6qvgByAtpPT_khCdk6XFeAD5UrwYb5S5N2sxxOWI-9gT-6TPPR4JaECxILGNQFiOubLvHYYTK1HqSighT6XT8a2TZhTUnbauQluo3Kqx1gDYf5y-dQTE0VG2piA_fmbwP5hkHu1CLjo5igALYAL-4ZypRZOp7XMJV6qU0YF60qdBaL5U5QFyefhqSvbyY1g3kiiXfC6K_GikjLujeQ'); filter: grayscale(1);"></div>
<div class="p-5 flex flex-col flex-1">
<h3 class="text-lg font-bold text-foreground">清迈休闲假期</h3>
<p class="text-sm text-muted mt-1">2023年11月5日 - 2023年11月12日</p>
</div>
</a>
</div>
<div class="group flex flex-col bg-card rounded-xl border border-border overflow-hidden hover:shadow-lg transition-shadow duration-300">
<a class="block" href="#">
<div class="aspect-[16/9] bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCeozNmiXUj6iCepkabbBdB0wQoxouaaYyarwdCbBlDPta7gslFsu9qr9Je6qvgByAtpPT_khCdk6XFeAD5UrwYb5S5N2sxxOWI-9gT-6TPPR4JaECxILGNQFiOubLvHYYTK1HqSighT6XT8a2TZhTUnbauQluo3Kqx1gDYf5y-dQTE0VG2piA_fmbwP5hkHu1CLjo5igALYAL-4ZypRZOp7XMJV6qU0YF60qdBaL5U5QFyefhqSvbyY1g3kiiXfC6K_GikjLujeQ'); filter: grayscale(1);"></div>
<div class="p-5 flex flex-col flex-1">
<h3 class="text-lg font-bold text-foreground">冰岛极光之旅</h3>
<p class="text-sm text-muted mt-1">2023年2月18日 - 2023年2月25日</p>
</div>
</a>
</div>
</div>
</main>
</div>

</body></html>